<template>
  <el-card class="gauge-card">
    <div class="gauge-container" ref="gaugeContainer" />
  </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import ROSLIB from "roslib";
const ros = new ROSLIB.Ros({
  url: "ws://localhost:9090"
});
// const allowedMessageType = "std_msgs/String";
const allowedMessageType = "geometry_msgs/Twist";
const topic = ref("/cmd_vel");
// const message = ref("");
const status = ref("");
let listener = null;
const linearSpeed = ref(0);
const angularSpeed = ref(0);
function updateMessage(msg: any) {
  // console.log(
  //   `Received message on
  //   ${listener.name}: ${msg.linear.x}, ${msg.linear.y}, ${msg.linear.z}, ${msg.angular.z}`
  // );
  linearSpeed.value = Math.abs(msg.linear.x);
  angularSpeed.value = Math.abs(msg.angular.z);
  // console.log(linearSpeed.value);
  createChart();
}

function unsubscribeListener(topic: string) {
  if (listener !== null) {
    listener.name = topic;
    listener.unsubscribe(updateMessage);
  }
}

function initSubscriber(ros: ROSLIB.Ros) {
  ros.getTopicType(topic.value, (type: any) => {
    if (allowedMessageType !== type) {
      status.value = "Unsupported ROS topic: ${topic.value}";
      unsubscribeListener(topic.value);
      return;
    }
    if (listener === null || listener.name !== topic.value) {
      unsubscribeListener(topic.value);
      listener = new ROSLIB.Topic({
        ros: ros,
        name: topic.value,
        messageType: type
      });
      listener.subscribe(updateMessage);
      status.value = "Listening to: ${topic.value}";
    }
  });
}

const gaugeContainer: any = ref<HTMLElement | null>(null);
let chartInstance: any = "";
const createChart = () => {
  chartInstance = echarts.init(gaugeContainer.value, "macarons");

  const option = {
    tooltip: {
      formatter: "{a} <br/>{b} : {c}%"
    },
    series: [
      {
        name: "linearSpeed ",
        type: "gauge",
        animationDuration: 100,
        animationEasing: "quadraticOut",
        center: ["200", "200"],
        min: 0,
        max: 1,
        progress: {
          show: true
        },
        detail: {
          valueAnimation: true,
          formatter: "{value} m/s"
        },
        data: [
          {
            value: linearSpeed.value,
            name: "线速度"
          }
        ]
      },
      {
        name: "angularSpeed",
        type: "gauge",
        center: ["600", "200"],
        min: 0,
        max: 3,
        progress: {
          show: true
        },
        detail: {
          valueAnimation: true,
          formatter: "{value} rad/s"
        },
        data: [
          {
            value: angularSpeed.value,
            name: "角速度"
          }
        ]
      }
    ]
  };

  chartInstance.setOption(option);
};
window.onresize = function () {
  chartInstance.resize;
};
onMounted(() => {
  initSubscriber(ros);
  createChart();
  window.addEventListener("resize", chartInstance.resize);
});

onUnmounted(() => {
  window.removeEventListener("resize", chartInstance.resize);
  chartInstance.dispose();
});
</script>
<style scoped>
.gauge-card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  width: 800px;
}

.gauge-container {
  /* width: 100%; */
  height: 400px;
  width: 800px;
  margin: 0;
  border: 1px solid red;
  /* height: 100%; */
}
.data {
  height: 400px;
  /* width: 400px; */
  margin: 0;
  border: 1px solid red;
}
</style>
